<!DOCTYPE html>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>用户初始密码修改</title>

    <script src="/static/jquery-1.10.2.min.js"></script>
    <link href="/static/iconfont.css" rel="stylesheet" />
    <link href="/static/layui.css?version=20180723" rel="stylesheet" />
    <script src="/static/layui.js?version=20180723"></script>
    <script src="/static/vue.js?version=20180733"></script>
    <script src="/static/layui.extend.js?version=20180723"></script>
    <script src="/static/help.js"></script>
    <script src="/static/boot.min.js"></script>
    <style type="text/css">
        body {
            background-color: #fff;
            padding: 0;
            margin: 0;
        }

        .header-panel {
            height: 30px;
            background: #fff;
            border-bottom: 1px solid #c1c1c1;
            box-shadow: 3px 5px 10px #838383;
            padding: 8px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
        }

        .layui-field-title legend {
            font-size: 16px;
        }

        .layui-icon-loading {
            display: inline-block;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 1s linear infinite;
            -moz-animation: rotate 1s linear infinite;
            -o-animation: rotate 1s linear infinite;
            animation: rotate 1s linear infinite;
        }

        @-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(360deg)
            }
        }

        @-moz-keyframes rotate {
            from {
                -moz-transform: rotate(0deg)
            }

            to {
                -moz-transform: rotate(359deg)
            }
        }

        @-o-keyframes rotate {
            from {
                -o-transform: rotate(0deg)
            }

            to {
                -o-transform: rotate(359deg)
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(359deg)
            }
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f9ef94f35e29ada0141c32e8a645d1aa";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<!--
<body style="padding:0;margin:0;overflow-x:hidden;background:url(/UpFiles/Bg/879686B8326843E6B4D228386E02DBE3.jpg)">
-->
<body style="padding:0;margin:0;overflow-x:hidden;">
    <div id="panel_loading" style="position:fixed;z-index:99999;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.8)">
        <div style="height:70px;width:70px;position:relative;margin:100px auto">
            <i class="layui-icon layui-icon-loading" style="font-size:60px;color:#fff;"></i>
        </div>
    </div>
    <script type="text/javascript">
        var wh = window.innerHeight;
        var lod = document.getElementById("panel_loading");
        lod.style.height = (wh + "px");
    </script>




<div id="FOM" class="layui-form" style="padding-top:20px;">
    <div class="layui-form-item" style="padding-left:110px;">
        <span style="color:red;float:left">
            当前使用初始密码请立即修改，密码长度不低于8位，且需包含数字、字母、特殊字符其中的两种！
        </span>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新密码<i style="color:red">*</i></label>
        <div class="layui-input-block" style="max-width:400px">
            <input type="password" id="newPwd" lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认新密码<i style="color:red">*</i></label>
        <div class="layui-input-block" style="max-width:400px">
            <input type="password" id="newPwd1" lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div style="clear:both"></div>
    <div style="padding:20px;padding-left:110px;">
        <button class="layui-btn" onclick="onSave(this)" id="btnsetpsw" lay-filter="demo1">提交保存</button>
    </div>
</div>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
    });
        function onSave(obj) {
            var bl = $("#FOM").layvalid();
            if (bl) {
                var err = [];

                if ($("#newPwd").val() != $("#newPwd1").val()) {
                    err.push('两次密码输入不一致!');
                }
                var pwd = $("#newPwd").val();
                if (pwd.length < 8) {
                    err.push('字符不能少于8位！');
                };

                var i= valijs();
                if (i<2) {
                    err.push("必须包含数字、字母、或者特殊字符其中的两种!");
                };

                if (err.length > 0) {
                    layui.layer.msg(err.join('\n'), { icon: 5, shift: 6 });
                } else {

                    $("#btnsetpsw").button('loading');
                    $.post('/user/onSetPwd',
                        {
                            psw1:$("#newPwd").val(),
                            psw2: $("#newPwd1").val(),
                            csrfmiddlewaretoken:  '{{ csrf_token }}',

                        }, function (rs) {
                        $("#btnsetpsw").button('reset');
                        if (rs.data) {
                            layui.layer.msg('密码修改成功', { icon: 1 });
                            window.location.href = "/index";
                        } else {
                            layui.layer.msg(rs.msg, { icon: 5, shift: 6 });
                        }
                     }).error(function () {
                        $("#btnsetpsw").button('reset');
                    });
                }
            }
        }

        function valijs() {

           var pwd = $("#newPwd").val();
            var i = 0
            var re = new RegExp("[a-zA-Z]");
            if (re.test(pwd)) {
                i = i + 1;
            }
            re = new RegExp("[0-9]");
            if(re.test(pwd)){
                i = i + 1;
            }
            re = new RegExp("((?=[\x21-\x7e]+)[^A-Za-z0-9])");
            if (re.test(pwd)) {
                i = i + 1;
            }
            return i;
        }
</script>

    <script type="text/javascript">
        $(function () {
            $("#panel_loading").hide();
        })
    </script>
    <script src="/static/jquery.unobtrusive-ajax.min.js"></script>
</body>
</html>
